<template>
	<div class = 'main' @contextmenu = 'page.contextmenu'>
		<starry-sky :stars-count = '1500' :distance = '800' id = 'back'/>
		<Voice v-if = 'page.show.voice'></Voice>
		<div class = 'body'>
			<transition name = 'opacity'>
				<Deck
					v-if = 'page.show.deck'
					:select = 'page.select'
				/>
			</transition>
			<transition name = 'opacity'>
				<Server
					v-if = 'page.show.server'
					:select = 'page.select'
				/>
			</transition>
			<Setting
				v-if = 'page.show.setting'
				:select = 'page.select'
			/>
			<transition name = 'opacity'>
				<YGOMenu
					v-if = 'page.show.menu'
					:select = 'page.select'
				/>
			</transition>
		</div>
	</div>
</template>
<script setup lang = 'ts'>
	import { reactive, onBeforeMount, onMounted } from "vue";
	import { LoadingBar } from '@varlet/ui';

	import YGOMenu from './pages/menu/menu.vue';
	import Deck from './pages/deck/deck_list.vue';
	import Server from './pages/server/server.vue';
	import Setting from './pages/setting/setting.vue';
	import Voice from './pages/voice/voice.vue';

	import mainGame from './script/game';
	import fs from './script/fs';
	import { I18N_KEYS } from "./script/language/i18n";
	import Dialog from './pages//varlet/dialog';

	const page = reactive({
		show : {
			voice : false,
			dialog : false,
			menu : false,
			server : false,
			deck : false,
			setting : false
		},
		select : {
			menu : () : void => {
				page.show.server = false;
				page.show.deck = false;
				page.show.setting = false;
				if (!page.show.menu)
					setTimeout(() => {
						page.show.menu = true;
					}, 600);
			},
			server : () : void => {
				page.show.menu = false;
				setTimeout(() => {
					page.show.server = true;
				}, 600);
			},
			deck : () : void => {
				page.show.menu = false;
				setTimeout(() => {
					page.show.deck = true;
				}, 600);
			},
			setting : () : void => {
				page.show.setting = true;
			}
		},
		contextmenu : (event : MouseEvent) : void => {
			if (!import.meta.env.DEV) event.preventDefault();
		}
	});

	onBeforeMount(async () : Promise<void> => {
		const on = async (chk : boolean = true) : Promise<void> => {
			await mainGame.init(chk);
			page.show.menu = true;
			page.show.voice = true;
		}
		const download = async () : Promise<void> => {
			LoadingBar.start();
			if (await fs.init()) {
				LoadingBar.finish();
				await on(false);
			} else {
				LoadingBar.error();
				await dialog();
			}
		}
		const dialog = async () : Promise<void> => {
			await Dialog({
				title : mainGame.get.text(I18N_KEYS.START_TITLE),
				message : mainGame.get.text(I18N_KEYS.START_MESSAGE),
				onConfirm : download,
				onCancel : mainGame.exit,
				closeOnClickOverlay : false
			}, true)
		};
		await mainGame.chk.file() ? await on() : await dialog();
	});

	onMounted(async () => {
	});

</script>
<style scoped lang = 'scss'> 
	.main {
		position: relative;
		.body {
			overflow: hidden;
			height: 97vh;
			width: 97vw;
			display: flex;
			gap: 10%;
			justify-content: flex-start;
		}
		#back {
			background: linear-gradient(#1c1a2e, #2f2434);
		}
	}
</style>
<style lang = 'scss'>
	@use './style/toast.scss';
	@use './style/transition.scss';
	.var-icon {
		&:hover {
			cursor: pointer;
		}
	}
	.dialog, .var-menu-option {
		color: white !important;
		border: 1px solid white;
	}
	.var-divider {
		color: white !important;
	}
	.var-back-top {
		background: none !important;
		button {
			background: none !important;
		}
	}
	.var-card {
		background-color: transparent !important;
	}
	.var-button {
		height: 32px !important;
		max-height: 8vh !important;
		overflow: hidden;
		svg {
			width: calc(8vh - 2px);
			height: calc(8vh - 2px);
			max-width: 30px;
			max-height: 30px;
		}
		span {
			font-size: min(4vh, var(--font-size-md)) !important;
		}
	}
	.var-menu-select--scrollable, .var-select__scroller, .ConversationBlock {
		&::-webkit-scrollbar {
			display: none;
		}
	}
	.readonly {
		--checkbox-unchecked-color: #555 !important;
		color: #555 !important;
	}
	.font-title {
		font-family: 'title' !important;
	}
	.font-menu {
		font-family: 'menu' !important;
	}
	:root {
		--result-background: transparent !important;
		--card-background: transparent !important;
		--dialog-background: transparent !important;
		--popup-content-background-color: transparent !important;
		--tabs-background: transparent !important;
		--select-scroller-background: rgba(0, 0, 0, 0.5) !important;
		--menu-select-menu-background-color: rgba(0, 0, 0, 0.5) !important;
		--dialog-message-color: white !important;
		--dialog-title-color: white !important;
		--list-loading-color: white !important;
		--list-finished-color: white !important;
		--list-error-color: white !important;
		--checkbox-text-color: white !important;
		--menu-option-text-color: white !important;
		--option-text-color: white !important;
		--cell-color: white !important;
		--divider-color: white !important;
		--checkbox-unchecked-color: white !important;
		--cell-border-color: white !important;
		--card-title-color: white !important;
		--card-outline-color: white !important;
		--card-subtitle-color: white !important;
		--card-description-color: white !important;
		--cell-padding: 1vh 20px !important;
		--field-decorator-line-size: 0.5px !important;
		--card-title-font-size: max(2.5vh, 10px) !important;
		--card-subtitle-font-size: max(1.5vh, 6px) !important;
		user-select: none;
	}
	body {
		font-family: 'text' !important;
	}
</style>